<template>
	<view class="quality-query-page">
		<view class="query-box">
			<view class="query-btn" :class="{ active: currentType === 'province' }" @click="showPopup('province')">
				<view class="query-btn-text">{{ currentProvince === -1 ? '北京' : currentProvince }}</view>
				<image class="query-btn-icon" mode="widthFix" src="/static/down.png"></image>
			</view>
			<view class="query-btn" :class="{ active: currentType === 'city' }" @click="showPopup('city')">
				<view class="query-btn-text">{{ 
					(currentCity === -1 && currentProvince === -1 && '北京市')
					|| (currentCity === -1 && currentProvince !== -1 && currentProvince)
					|| (currentCity !== -1 && currentProvince !== -1 && currentCity + '市')
				}}</view>
				<image class="query-btn-icon" mode="widthFix" src="/static/down.png"></image>
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff" @change="onPopupChange">
				<view class="city">
					<view 
						class="list-item" 
						:class="{ active: item === currentSelect }" 
						v-for="item in currentOps"
						@click.stop="setSelect(item)"
					>
						{{ item }}
					</view>
				</view>
			</uni-popup>

		</view>
		<view class="card">
			<view class="card-title">
				<view class="city">{{ currentCity === -1 ? '北京' : currentCity }}市</view>
				<view class="search-btn" @click="goToSoftPage">
					<icon type="search" size="12" color="#fff"></icon>
					<text>软水查询</text>
				</view>
			</view>
			<view class="card-content">
				<view class="content-head">
					<view class="col-item col1">检查项目</view>
					<view class="col-item col2">结果数据</view>
					<view class="col-item col3">单位</view>
					<view class="col-item col4">参考限值</view>
				</view>
				<view class="content-row">
					<view class="row-item col1">溶解性总固体(TDS)</view>
					<view class="row-item col2">{{ items[0].tds_mean }}</view>
					<view class="row-item col3">{{ items[0].tds_unit }}</view>
					<view class="row-item col4">{{ items[0].tds_limit }}</view>
				</view>
				<view class="content-row">
					<view class="row-item col1">总硬度(以CaCO₃计算)</view>
					<view class="row-item col2">{{ items[1].hardness_mean }}</view>
					<view class="row-item col3">{{ items[1].hardness_unit }}</view>
					<view class="row-item col4">{{ items[1].hardness_limit }}</view> 
				</view>
				<view class="content-row">
					<view class="row-item col1">浊度均值</view>
					<view class="row-item col2">{{ items[2].turbidity_mean }}</view>
					<view class="row-item col3">{{ items[2].turbidity_unit }}</view>
					<view class="row-item col4">{{ items[2].turbidity_limit }}</view>
				</view>
				<view class="content-row">
					<view class="row-item col1">余氯</view>
					<view class="row-item col23">{{ items[3].chlorine_residual || '根据门店试剂检测' }}</view>
					<view class="row-item col4"></view>
				</view>
			</view>
			<!-- <view class="card-tips">*数据来自二厂出厂水月检指标的检测结果（含苯、石油类）水质常规指标及消毒剂指标</view> -->
			<view class="card-tips" v-if="source">*数据来自{{ source || '-'  }}</view>
		</view>
	</view>
</template>
<script>
	import request from '/common/request.js'

	export default {
		onShareAppMessage() {
					return {
						title: '城市水质查询',
						imageUrl: "",
						// path: ""
					}
				},
		data() {
			return {
				goodsId: '',
				provinceData: [],
				source: '',
				items: [
					{
						"tds_mean": "-",
						"tds_unit": "-",
						"tds_limit": ""
					},
					{
						"hardness_mean": "-",
						"hardness_unit": "-",
						"hardness_limit": "-"
					},
					{
						"turbidity_mean": "-",
						"turbidity_unit": "-",
						"turbidity_limit": "-"
					},
					{
						"chlorine_residual": ''
					}
				],
				currentProvince: -1,
				currentCity: -1,
				currentOps: [],
				currentSelect: -1,
				currentType: -1,
			}
		},
		onLoad(options) {
			this.getWaterQuality()
		},
		methods: {
			onPopupChange(e) {
				const { show } = e
				if (!show) {
					this.currentType = -1
				}
			},
			updateQuery() {
				const province = this.currentProvince
				const city = this.currentCity
				uni.showLoading({ icon: 'none' })
				const provinceItem = this.provinceData.find(e => e.province === province)
				let cityItem = null
				if (provinceItem) {
					cityItem = provinceItem.city.find(e => e.city === city)
					if (cityItem) {
						// this.showData = cityItem
						setTimeout(() => {
							this.source = cityItem.list[cityItem.list.length - 1].source
							this.items = cityItem.list
							console.log(cityItem)
							uni.hideLoading()
						}, 500)
					}
				}
				if (!cityItem) {
					uni.showToast({ title: '暂无数据', icon: 'none' })
				}
			},
			setSelect(item) {
				if (this.currentType === 'province') {
					this.currentProvince = item
					// this.currentProvince = item
					const citys = ((this.provinceData.find(e => e.province === this.currentProvince) || {}).city || []).map(e => e.city)
					this.currentCity = citys && citys[0] || -1
					this.updateQuery()
					// this.currentCity = -1
				} else {
					this.currentCity = item
					this.updateQuery()
				}
				this.currentSelect = item 
				this.$refs.popup.close()
				this.currentType = -1
			},
			showPopup(type) {
				this.currentType = type
				if (type === 'province') {
					this.currentOps = this.provinceData.map(e => e.province)
				} else {
					this.currentOps = ((this.provinceData.find(e => e.province === this.currentProvince) || {}).city || []).map(e => e.city)
				}
				this.$refs.popup.open('bottom')
			},
			getWaterQuality() {
				request({
					url: '/water/quality',
				}).then(res => {
					console.log(res)
					if (!res) return
					const keys = {}
					res.forEach(item => {
						const { province, city, chlorine_residual, list } = item
						if (!keys[province]) {
							keys[province] = []
						}
						keys[province].push({
							city,
							chlorine_residual,
							list
						})
					})
					const provinces = []
					const firstData = keys["北京"]
					if (firstData) {
						console.log(firstData)
						provinces.push({ province: '北京', city: firstData })
						this.currentProvince = '北京'
						this.currentCity = '北京'
						this.currentOps = (firstData || []).map(e => e.city)
						delete keys["北京"]
					}
					Object.keys(keys).forEach(key => {
						provinces.push({ province: key, city: keys[key] })
					})
					this.provinceData = provinces
					this.updateQuery()
					console.log("provinces: ", provinces)
				})
			},
			goToSoftPage() {
				uni.navigateTo({
					url: `/pages/softwater/softwater`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// min-height: 100vh;
		height: 100%;
	}
	.query-box {
		display: flex;
		flex-direction: row;
		text-align: center;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		margin-bottom: 60rpx;
		.query-btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 20rpx 0;

			&.active {
				.query-btn-text {
					color: #374486;
					font-weight: bold;
				}
				.query-btn-icon {
					transform: rotateZ(180deg);
				}
			}
			.query-btn-text {
				color: #888;
				font-size: 13px;
				margin-right: 14rpx;
			}
			.query-btn-icon {
				width: 20rpx;
				height: 20rpx;
				transition: all .3s;
			}
		}
	}
	.city {
		max-height: 500rpx;
		overflow: auto;
		border-radius: 10px 10px 0 0;
		.list-item {
			color: #999;
			font-size: 13px;
			padding: 16rpx 0;

			&.active {
				color: #374486;
			}
		}
	}

	::v-deep view[name="content"]{
		background: #f9ebc6;
		border-radius: 10px 10px 0 0;
		padding: 20rpx 0;
		overflow: hidden;
	}


	.provinces {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		.list-item {
			color: #999;
			font-size: 13px;
			padding: 14rpx 0;

			&.active {
				color: #374486;
			}
		}
		.left {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			max-height: 400rpx;
			overflow: auto;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			max-height: 400rpx;
			background-color: #f2f2f2;
		}
	}

	.quality-query-page {
		background-color: #fff;
		// padding: 40rpx 0;
		padding-bottom: 40rpx;
		background: url("/static/szbg.png");
		background-size: 100% auto;
		background-position: 0 -260rpx;
		background-repeat: no-repeat;
	}

	.card {
		margin: 20rpx 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 10px;
		border: 1px solid #eee;
		box-shadow: 1rpx 1rpx 2rpx #eee;
		background-color: #fff;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ddd;

		.city {
			padding: 10rpx 40rpx;
			border-radius: 8px 8px 0 0;
			color: #fff;
			background-color: #374486;
			font-size: 14px;
		}
		.search-btn {
			display: inline-flex;
			align-items: center;
			padding: 6rpx 10rpx;
			border-radius: 10rpx;
			font-size: 12px;
			// background-color: #04158c;
			background-color: #374486;
			color: #fff;

			text {
				padding-left: 4rpx;
			}
		}
	}

	.content-head {
		display: flex;
		justify-content: space-between;
		padding-top: 60rpx;
		padding-bottom: 50rpx;

		.col-item {
			color: #fff;
			font-size: 12px;
			background-color: #45b4e0;
			padding: 8rpx 0;
			text-align: center;
			border-radius: 20px;
		}
	}

	.col1 {
		width: 37%;
	}
	.col2 {
		width: 22%;
	}
	.col3 {
		width: 16%;
	}
	.col4 {
		width: 22%;
	}

	.content-row {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		.row-item {
			font-size: 12px;
			text-align: center;
			border-bottom: 1px solid #eee;
			padding-bottom: 30rpx;
			margin-bottom: 50rpx;
		}
		.col1 {
			text-align: left;
		}

		.col4 {
			color: #45b4e0;
		}
		.col23 {
			width: calc(22% + 16%);
		}
	}

	.card-tips {
		font-size: 12px;
		color: #8f8f94;
		line-height: 1.5;
		padding-top: 50rpx;
		padding-bottom: 40rpx;
	}
	
</style>
